<template>
	<view class="container">
		<!-- 顶部信息栏 -->
		<view class="header-info">
			<view class="info-item">
				<text class="info-label">班级:</text>
				<text class="info-value">{{ studentDetail.className }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">总人数:</text>
				<text class="info-value">{{ studentDetail.totalCount }}人</text>
			</view>
		</view>

		<!-- 学生信息 -->
		<view class="section">
			<view class="section-title">学生信息</view>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">学生姓名:</text>
					<text class="info-value">{{ studentDetail.studentName }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">学生学号:</text>
					<text class="info-value">{{ studentDetail.studentId }}</text>
				</view>
			</view>
		</view>

		<!-- 家长信息 -->
		<view class="section">
			<view class="section-title">
				<text class="title-text">家长信息</text>
				<!-- 	<view class="add-parent-btn" @tap="addParent">
					<text class="add-icon">+</text>
				</view> -->
			</view>

			<view class="parent-list">
				<view v-for="(parent, index) in studentDetail.parentList" :key="parent.id" class="parent-item">
					<view class="parent-icon">
						<image :src="parent.type === 'wechat' ? '/static/class/wchat.png' : '/static/class/qq.png'"
							class="icon-img" mode="aspectFit"></image>
					</view>

					<view class="parent-info">
						<view class="parent-row">
							<text class="parent-label">绑定时间:</text>
							<text class="parent-value">{{ parent.bindTime }}</text>
						</view>
						<view class="parent-row">
							<text class="parent-label">微信号:</text>
							<text class="parent-value">{{ parent.wechatId }}</text>
						</view>
					</view>

					<view class="f f-a-c f-j-c f-d-c" @tap="removeParent(parent, index)">
						<image src="/static/class/yichu.png" class="imgYi" mode=""></image>
						<view class="yi">
							移除
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="studentDetail.parentList.length === 0" class="empty-parent">
					<image src="/static/icons/empty-parent.png" class="empty-icon" mode="aspectFit"></image>
					<text class="empty-text">暂无家长信息</text>
					<text class="empty-desc">点击右上角"+"添加家长</text>
				</view>
			</view>
		</view>

		<!-- 底部确认按钮 -->
		<view class="bottom-action">
			<button class="confirm-btn f f--ac f-j-c" @tap="confirmStudentInfo">
				确认学生信息
			</button>
		</view>

		<!-- 添加家长弹窗 -->
		<view v-if="showAddParent" class="modal-overlay" @tap="hideAddParent">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">添加家长</text>
					<view class="close-btn" @tap="hideAddParent">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">家长类型</text>
						<view class="type-selector">
							<view class="type-option" :class="{ 'selected': newParent.type === 'wechat' }"
								@tap="selectParentType('wechat')">
								<image src="/static/icons/wechat.png" class="type-icon" mode="aspectFit"></image>
								<text class="type-text">微信家长</text>
							</view>
							<view class="type-option" :class="{ 'selected': newParent.type === 'phone' }"
								@tap="selectParentType('phone')">
								<image src="/static/icons/user.png" class="type-icon" mode="aspectFit"></image>
								<text class="type-text">手机家长</text>
							</view>
						</view>
					</view>

					<view class="form-item">
						<text class="form-label">微信号</text>
						<input v-model="newParent.wechatId" class="form-input" placeholder="请输入微信号" maxlength="20" />
					</view>

					<view class="form-item">
						<text class="form-label">家长姓名</text>
						<input v-model="newParent.parentName" class="form-input" placeholder="请输入家长姓名" maxlength="10" />
					</view>
				</view>

				<view class="modal-footer">
					<button class="modal-btn secondary" @tap="hideAddParent">取消</button>
					<button class="modal-btn primary" @tap="confirmAddParent">确定</button>
				</view>
			</view>
		</view>

		<!-- 操作确认弹窗 -->
		<view v-if="showConfirm" class="modal-overlay" @tap="hideConfirm">
			<view class="confirm-modal" @tap.stop>
				<view class="confirm-content">
					<text class="confirm-title">{{ confirmData.title }}</text>
					<text class="confirm-message">{{ confirmData.message }}</text>
				</view>
				<view class="confirm-actions">
					<button class="confirm-cancel" @tap="hideConfirm">取消</button>
					<button class="confirm-ok" @tap="handleConfirm">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentDetail: {
					className: '三年一班',
					totalCount: 50,
					studentName: '小明',
					studentId: '0000000001',
					parentList: [{
							id: 1,
							type: 'wechat',
							bindTime: '2025.6.1',
							wechatId: '1111111111',
							parentName: '张爸爸'
						},
						{
							id: 2,
							type: 'phone',
							bindTime: '2025.6.1',
							wechatId: '1111111111',
							parentName: '李妈妈'
						}
					]
				},

				showAddParent: false,
				showConfirm: false,

				newParent: {
					type: 'wechat',
					wechatId: '',
					parentName: ''
				},

				confirmData: {
					title: '',
					message: '',
					action: null,
					params: null
				}
			}
		},

		onLoad(options) {
			// 根据传入的学生ID加载学生详情
			if (options.id) {
				this.loadStudentDetail(options.id);
			}
		},
		onShow() {
			// this.init()
		},
		methods: {
			async init() {
				await this.$api.studentInfo({
					studentId: ''
				})
			},
			// 加载学生详情
			loadStudentDetail(studentId) {
				// 模拟API调用
				console.log('加载学生详情:', studentId);

				// 这里可以根据实际需求调用API获取数据
				uni.showLoading({
					title: '加载中...'
				});

				setTimeout(() => {
					uni.hideLoading();
					// 模拟加载完成
				}, 1000);
			},

			// 显示添加家长弹窗
			addParent() {
				this.newParent = {
					type: 'wechat',
					wechatId: '',
					parentName: ''
				};
				this.showAddParent = true;
			},

			// 隐藏添加家长弹窗
			hideAddParent() {
				this.showAddParent = false;
			},

			// 选择家长类型
			selectParentType(type) {
				this.newParent.type = type;
			},

			// 确认添加家长
			confirmAddParent() {
				if (!this.newParent.wechatId.trim()) {
					uni.showToast({
						title: '请输入微信号',
						icon: 'none'
					});
					return;
				}

				if (!this.newParent.parentName.trim()) {
					uni.showToast({
						title: '请输入家长姓名',
						icon: 'none'
					});
					return;
				}

				// 添加新家长
				const newParentData = {
					id: Date.now(),
					type: this.newParent.type,
					bindTime: this.formatDate(new Date()),
					wechatId: this.newParent.wechatId,
					parentName: this.newParent.parentName
				};

				this.studentDetail.parentList.push(newParentData);
				this.hideAddParent();

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			},

			// 移除家长
			removeParent(parent, index) {
				this.confirmData = {
					title: '确认移除',
					message: `确定要移除家长"${parent.parentName}"吗？`,
					action: 'removeParent',
					params: {
						parent,
						index
					}
				};
				this.showConfirm = true;
			},

			// 确认学生信息
			confirmStudentInfo() {
				this.confirmData = {
					title: '确认信息',
					message: '确定要提交学生信息吗？',
					action: 'confirmInfo',
					params: null
				};
				this.showConfirm = true;
			},

			// 显示确认弹窗
			showConfirmDialog(title, message, action, params = null) {
				this.confirmData = {
					title,
					message,
					action,
					params
				};
				this.showConfirm = true;
			},

			// 隐藏确认弹窗
			hideConfirm() {
				this.showConfirm = false;
			},

			// 处理确认操作
			handleConfirm() {
				const {
					action,
					params
				} = this.confirmData;

				switch (action) {
					case 'removeParent':
						this.doRemoveParent(params.index);
						break;
					case 'confirmInfo':
						this.doConfirmInfo();
						break;
				}

				this.hideConfirm();
			},

			// 执行移除家长
			doRemoveParent(index) {
				this.studentDetail.parentList.splice(index, 1);
				uni.showToast({
					title: '移除成功',
					icon: 'success'
				});
			},

			// 执行确认信息
			doConfirmInfo() {
				uni.showLoading({
					title: '提交中...'
				});

				// 模拟提交
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});

					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 2000);
			},

			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}.${month}.${day}`;
			},

			// 编辑学生信息
			editStudentInfo() {
				uni.navigateTo({
					url: `/pages/student-edit/index?id=${this.studentDetail.studentId}`
				});
			},

			// 查看家长详情
			viewParentDetail(parent) {
				uni.navigateTo({
					url: `/pages/parent-detail/index?id=${parent.id}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 120rpx;
	}

	.imgYi {
		width: 38rpx;
		height: 38rpx;
	}

	.yi {
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}

	.header-info {
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		// border-bottom: 1rpx solid #eee;
	}

	.info-item {
		display: flex;
		align-items: center;
	}

	.info-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.section {
		margin-top: 20rpx;
	}

	.section-title {
		background-color: white;
		padding: 25rpx 30rpx;
		// border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.add-parent-btn {
		width: 50rpx;
		height: 50rpx;
		background-color: #007bff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-icon {
		color: white;
		font-size: 28rpx;
		font-weight: 300;
	}

	.info-card {
		background-color: white;
		padding: 30rpx;
	}

	.info-row {
		display: flex;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.parent-list {
		background-color: white;
	}

	.parent-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		// border-bottom: 1rpx solid #f0f0f0;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-bottom: 20rpx;

		&:last-child {
			border-bottom: none;
		}
	}

	.parent-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.icon-img {
		width: 100%;
		height: 100%;
	}

	.parent-info {
		flex: 1;
	}

	.parent-row {
		display: flex;
		margin-bottom: 8rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.parent-label {
		font-size: 26rpx;
		color: #666;
		margin-right: 10rpx;
		min-width: 120rpx;
	}

	.parent-value {
		font-size: 26rpx;
		color: #333;
	}

	.remove-btn {
		background-color: #dc3545;
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
	}

	.remove-text {
		color: white;
		font-size: 24rpx;
	}

	.empty-parent {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 30rpx;
	}

	.empty-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.empty-desc {
		font-size: 24rpx;
		color: #ccc;
	}

	.bottom-action {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 100;
	}

	.confirm-btn {
		width: 686rpx;
		height: 104rpx;
		background: #05C490;
		border-radius: 30rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.confirm-btn::after {
		border: none;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: white;
		border-radius: 20rpx;
		width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-icon {
		font-size: 40rpx;
		color: #999;
	}

	.modal-body {
		padding: 30rpx;
	}

	.form-item {
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
	}

	.type-selector {
		display: flex;
		gap: 20rpx;
	}

	.type-option {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		border: 2rpx solid #ddd;
		border-radius: 12rpx;

		&.selected {
			border-color: #007bff;
			background-color: #f8f9ff;
		}
	}

	.type-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 10rpx;
	}

	.type-text {
		font-size: 24rpx;
		color: #666;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;

		&:focus {
			border-color: #007bff;
		}
	}

	.modal-footer {
		display: flex;
		gap: 20rpx;
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.modal-btn {
		flex: 1;
		height: 80rpx;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;

		&.secondary {
			background-color: #f8f9fa;
			color: #666;
		}

		&.primary {
			background-color: #007bff;
			color: white;
		}
	}

	.modal-btn::after {
		border: none;
	}

	.confirm-modal {
		background-color: white;
		border-radius: 20rpx;
		width: 500rpx;
		overflow: hidden;
	}

	.confirm-content {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.confirm-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.confirm-message {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.confirm-actions {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.confirm-cancel,
	.confirm-ok {
		flex: 1;
		height: 100rpx;
		border: none;
		background-color: white;
		font-size: 28rpx;

		&.confirm-cancel {
			color: #666;
			border-right: 1rpx solid #eee;
		}

		&.confirm-ok {
			color: #007bff;
			font-weight: 500;
		}
	}

	.confirm-cancel::after,
	.confirm-ok::after {
		border: none;
	}
</style>